{extend name="extra@admin/content"}
{block name="content"}
<style>
    .layui-form-label{
        width:100px;
    };
</style>
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <!--商品logo  start-->
    <div class="layui-form-item">
        <label class="layui-form-label">商品logo *</label>
            <div class="uploadimage" style="margin-left:1%;">
                <input type="hidden"  name="logo" value="{if condition='!empty($info.logo)'} {$info.logo} {/if}" />
            </div>
            <a data-file="one" data-field="logo" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"
               class="uploadbutton"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>
            {if $info and !empty($info.logo)}
            <script>
                $(function(){
                    var img = "{$info.logo}";
                    require(['jquery'], function () {
                        $('[name="logo"]').parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + img + ')');
                    });
                });
            </script>
            {/if}
            <script>
                require(['jquery'], function () {
                    $('[name="logo"]').on('change', function () {
                        $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
                    });
                });
            </script>
    </div>
    <!--商品logo  end-->

    <!--&lt;!&ndash;电脑热点  start&ndash;&gt;-->
    <!--<div class="layui-form-item">-->
          <!--<label class="layui-form-label">电脑热点一 *</label>-->
              <!--<div class="uploadimage" style="margin-left:1%;"><input type="hidden" name="hot_pc_banner" value="{if condition='!empty($info.hot_pc_banner)'} {$info.hot_pc_banner} {/if}" /></div>-->
              <!--<a data-file="one" data-field="hot_pc_banner" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"-->
                 <!--class="uploadbutton"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>-->
              <!--{if $info and !empty($info.hot_pc_banner)}-->
              <!--<script>-->
                  <!--$(function(){-->
                      <!--var img = "{$info.hot_pc_banner}";-->
                      <!--require(['jquery'], function () {-->
                          <!--$('[name="hot_pc_banner"]').parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + img + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
              <!--{/if}-->
              <!--<script>-->
                  <!--require(['jquery'], function () {-->
                      <!--$('[name="hot_pc_banner"]').on('change', function () {-->
                          <!--$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
    <!--</div>-->
    <!--&lt;!&ndash;电脑热点  end&ndash;&gt;-->

    <!--&lt;!&ndash;手机热点  start&ndash;&gt;-->
    <!--<div class="layui-form-item">-->
          <!--<label class="layui-form-label" >手机热点一 *</label>-->
              <!--<div class="uploadimage" style="margin-left:1%;"><input type="hidden" name="hot_mo_banner" value="{if condition='!empty($info.hot_mo_banner)'} {$info.hot_mo_banner} {/if}" /></div>-->
              <!--<a data-file="one" data-field="hot_mo_banner" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"-->
                 <!--class="uploadbutton"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>-->
              <!--{if $info and !empty($info.hot_mo_banner)}-->
              <!--<script>-->
                  <!--$(function(){-->
                      <!--var img = "{$info.hot_mo_banner}";-->
                      <!--require(['jquery'], function () {-->
                          <!--$('[name="hot_mo_banner"]').parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + img + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
              <!--{/if}-->
              <!--<script>-->
                  <!--require(['jquery'], function () {-->
                      <!--$('[name="hot_mo_banner"]').on('change', function () {-->
                          <!--$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
    <!--</div>-->
    <!--&lt;!&ndash;手机热点  end&ndash;&gt;-->

    <!--&lt;!&ndash;热点推荐二  start&ndash;&gt;-->
    <!--<div class="layui-form-item">-->
          <!--<label class="layui-form-label">热点二 *</label>-->
              <!--<div class="uploadimage" style="margin-left:1%;"><input type="hidden" name="hot_pic" value="{if condition='!empty($info.hot_pic)'} {$info.hot_pic} {/if}" /></div>-->
              <!--<a data-file="one" data-field="hot_pic" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"-->
                 <!--class="uploadbutton"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>-->
              <!--{if $info and !empty($info.hot_pic)}-->
              <!--<script>-->
                  <!--$(function(){-->
                      <!--var img = "{$info.hot_pic}";-->
                      <!--require(['jquery'], function () {-->
                          <!--$('[name="hot_pic"]').parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + img + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
              <!--{/if}-->
              <!--<script>-->
                  <!--require(['jquery'], function () {-->
                      <!--$('[name="hot_pic"]').on('change', function () {-->
                          <!--$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');-->
                      <!--});-->
                  <!--});-->
              <!--</script>-->
    <!--</div>-->
    <!--&lt;!&ndash;热点推荐二  end&ndash;&gt;-->

    <!--商品轮播图  start-->
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图片 *</label>
        <style>
            .upload-option-button {
                float: right;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                display: none
            }

            .upload-option-button:hover {
                text-decoration: none;
                color: #fff
            }

            .uploadimagemtl:hover a {
                display: inline-block
            }
        </style>

        {if !empty($info.images)}
        {volist name='images' id='vo'}
        {if $vo}
        <!--去掉data-tips-image属性  去掉点击当大图片-->
        <!--<div class="uploadimage transition uploadimagemtl" data-tips-image="{$vo}" style="background-image: url(&quot;{$vo}&quot;);">-->
            <!--<a href="javascript:void(0)" onclick="shanchu(this)" data-pic="{$vo}" class="layui-icon upload-option-button">&#x1006;</a>-->
        <!--</div>-->
        <div class="uploadimage transition uploadimagemtl"  style="background-image: url(&quot;{$vo}&quot;);">
            <a href="javascript:void(0)" onclick="shanchu(this)" data-pic="{$vo}" class="layui-icon upload-option-button">&#x1006;</a>
        </div>
        {/if}
        {/volist}
        {/if}

        <input type='hidden' name='images' value="{$info.images}"/>

        <a data-file="mut" data-field="images" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)" style="margin-left:1%;"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>

        <script type="text/javascript">
            require(['jquery'], function () {
                var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
                $('[name="images"]').on('change', function () {
                    var input = this, values = [], srcs = this.value.split('|');
                    $(this).prevAll('.uploadimage').map(function () {
                        values.push($(this).attr('data-tips-image'));
                    }), $(this).prevAll('.uploadimage').remove();
                    values.reverse();
                    for (var i in srcs) {
                        values.push(srcs[i]);
                    }
                    this.value = values.join('|');
                    for (var i in values) {
                        //此行代码是点击放大图片  -- 去掉
                        var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
                        $tpl.data('input', input).data('srcs', values).data('index', i);
                        $tpl.on('click', 'a', function (e) {
                            e.stopPropagation();
                            var $cur = $(this).parent();
                            $.msg.confirm('确定要移除这张图片吗？', function () {
                                var data = $cur.data('srcs');
                                delete data[$cur.data('index')];
                                $cur.data('input').value = data.join('|');
                                $cur.remove();
                            });
                        });
                        $(this).before($tpl);
                    }
                });
            });
        </script>
    </div>
    <!--商品轮播图  end-->

    <!--电脑海报  start-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">电脑海报 *</label>-->
        <!--<style>-->
            <!--.upload-option-button {-->
                <!--float: right;-->
                <!--background: rgba(0, 0, 0, 0.5);-->
                <!--color: #fff;-->
                <!--width: 20px;-->
                <!--height: 20px;-->
                <!--line-height: 20px;-->
                <!--text-align: center;-->
                <!--display: none-->
            <!--}-->

            <!--.upload-option-button:hover {-->
                <!--text-decoration: none;-->
                <!--color: #fff-->
            <!--}-->

            <!--.uploadimagemtl:hover a {-->
                <!--display: inline-block-->
            <!--}-->
        <!--</style>-->

        <!--{if !empty($info.pc_banner)}-->
        <!--{volist name='pc_banner' id='vo'}-->
        <!--{if $vo}-->
        <!--<div class="uploadimage transition uploadimagemtl" data-tips-image="{$vo}" style="background-image: url(&quot;{$vo}&quot;);">-->
            <!--<a href="javascript:void(0)" onclick="del_pc_banner(this)" data-pic="{$vo}" class="layui-icon upload-option-button">&#x1006;</a>-->
        <!--</div>-->
        <!--{/if}-->
        <!--{/volist}-->
        <!--{/if}-->

        <!--<input type='hidden' name='pc_banner' value="{$info.pc_banner}"/>-->

        <!--<a data-file="mut" data-field="pc_banner" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)" style="margin-left:1%;"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>-->

        <!--<script type="text/javascript">-->
            <!--require(['jquery'], function () {-->
                <!--var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';-->
                <!--$('[name="pc_banner"]').on('change', function () {-->
                    <!--var input = this, values = [], srcs = this.value.split('|');-->
                    <!--$(this).prevAll('.uploadimage').map(function () {-->
                        <!--values.push($(this).attr('data-tips-image'));-->
                    <!--}), $(this).prevAll('.uploadimage').remove();-->
                    <!--values.reverse();-->
                    <!--for (var i in srcs) {-->
                        <!--values.push(srcs[i]);-->
                    <!--}-->
                    <!--this.value = values.join('|');-->
                    <!--for (var i in values) {-->
                        <!--var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');-->
                        <!--$tpl.data('input', input).data('srcs', values).data('index', i);-->
                        <!--$tpl.on('click', 'a', function (e) {-->
                            <!--e.stopPropagation();-->
                            <!--var $cur = $(this).parent();-->
                            <!--$.msg.confirm('确定要移除这张图片吗？', function () {-->
                                <!--var data = $cur.data('srcs');-->
                                <!--delete data[$cur.data('index')];-->
                                <!--$cur.data('input').value = data.join('|');-->
                                <!--$cur.remove();-->
                            <!--});-->
                        <!--});-->
                        <!--$(this).before($tpl);-->
                    <!--}-->
                <!--});-->
            <!--});-->
        <!--</script>-->
    <!--</div>-->
    <!--&lt;!&ndash;电脑好饱  end&ndash;&gt;-->

    <!--&lt;!&ndash;手机海报  start&ndash;&gt;-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">手机海报 *</label>-->
        <!--<style>-->
            <!--.upload-option-button {-->
                <!--float: right;-->
                <!--background: rgba(0, 0, 0, 0.5);-->
                <!--color: #fff;-->
                <!--width: 20px;-->
                <!--height: 20px;-->
                <!--line-height: 20px;-->
                <!--text-align: center;-->
                <!--display: none-->
            <!--}-->

            <!--.upload-option-button:hover {-->
                <!--text-decoration: none;-->
                <!--color: #fff-->
            <!--}-->

            <!--.uploadimagemtl:hover a {-->
                <!--display: inline-block-->
            <!--}-->
        <!--</style>-->

        <!--{if !empty($info.pc_banner)}-->
        <!--{volist name='mo_banner' id='vo'}-->
        <!--{if $vo}-->
        <!--<div class="uploadimage transition uploadimagemtl" data-tips-image="{$vo}" style="background-image: url(&quot;{$vo}&quot;);">-->
            <!--<a href="javascript:void(0)" onclick="del_mo_banner(this)" data-pic="{$vo}" class="layui-icon upload-option-button">&#x1006;</a>-->
        <!--</div>-->
        <!--{/if}-->
        <!--{/volist}-->
        <!--{/if}-->

        <!--<input type='hidden' name='mo_banner' value="{$info.mo_banner}"/>-->

        <!--<a data-file="mut" data-field="mo_banner" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)" style="margin-left:1%;"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>-->

        <!--<script type="text/javascript">-->
            <!--require(['jquery'], function () {-->
                <!--var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';-->
                <!--$('[name="mo_banner"]').on('change', function () {-->
                    <!--var input = this, values = [], srcs = this.value.split('|');-->
                    <!--$(this).prevAll('.uploadimage').map(function () {-->
                        <!--values.push($(this).attr('data-tips-image'));-->
                    <!--}), $(this).prevAll('.uploadimage').remove();-->
                    <!--values.reverse();-->
                    <!--for (var i in srcs) {-->
                        <!--values.push(srcs[i]);-->
                    <!--}-->
                    <!--this.value = values.join('|');-->
                    <!--for (var i in values) {-->
                        <!--var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');-->
                        <!--$tpl.data('input', input).data('srcs', values).data('index', i);-->
                        <!--$tpl.on('click', 'a', function (e) {-->
                            <!--e.stopPropagation();-->
                            <!--var $cur = $(this).parent();-->
                            <!--$.msg.confirm('确定要移除这张图片吗？', function () {-->
                                <!--var data = $cur.data('srcs');-->
                                <!--delete data[$cur.data('index')];-->
                                <!--$cur.data('input').value = data.join('|');-->
                                <!--$cur.remove();-->
                            <!--});-->
                        <!--});-->
                        <!--$(this).before($tpl);-->
                    <!--}-->
                <!--});-->
            <!--});-->
        <!--</script>-->
    <!--</div>-->
    <!--手机摆好  end-->

    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2">
        <input type='hidden' value='{$id}' name='id'/>
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    /**
     *  删除图集中的图片
     * @param obj
     */
    function shanchu(obj){
        $.msg.confirm('确定要移除这张图片吗？', function () {
            var pic = $(obj).attr('data-pic');      //删除的图片
            var id = $('input[name=id]').val();
            console.log(pic);

            var images = $('input[name=images]').val();
            var arr = images.split('|');
            var index = $.inArray(pic,arr);
            console.log(index);
            arr.splice(index,1);
            var va= arr.join('|');
            console.log(va);
            $.post("{:url('del_pic')}",
                {id:id,images:va},
                function(data){
                    if(data.code == 1){
                        $('input[name=images]').val(va);
                        $(obj).parent().remove();
                    }else{
                        layer.msg('删除失败',function(){
                            // $('#create').empty();       //清空元素内部元素
                        });
                    }
                }
            );
        });
    }

    /**
     *  删除电脑版轮播图
     */
    function del_pc_banner(obj){
        $.msg.confirm('确定要移除这张图片吗？', function () {
            var pic = $(obj).attr('data-pic');      //删除的图片
            var id = $('input[name=id]').val();
            console.log(pic);

            var images = $('input[name=pc_banner]').val();
            var arr = images.split('|');
            var index = $.inArray(pic,arr);
            console.log(index);
            arr.splice(index,1);
            var va= arr.join('|');
            console.log(va);
            $.post("{:url('del_pc_banner')}",
                {id:id,pc_banner:va},
                function(data){
                    if(data.code == 1){
                        $('input[name=pc_banner]').val(va);
                        $(obj).parent().remove();
                    }else{
                        layer.msg('删除失败',function(){
                            // $('#create').empty();       //清空元素内部元素
                        });
                    }
                }
            );
        });
    }

    /**
     *  删除手机版轮播图
     */
    function del_mo_banner(obj){
        $.msg.confirm('确定要移除这张图片吗？', function () {
            var pic = $(obj).attr('data-pic');      //删除的图片
            var id = $('input[name=id]').val();
            console.log(pic);

            var images = $('input[name=mo_banner]').val();
            var arr = images.split('|');
            var index = $.inArray(pic,arr);
            console.log(index);
            arr.splice(index,1);
            var va= arr.join('|');
            console.log(va);
            $.post("{:url('del_mo_banner')}",
                {id:id,mo_banner:va},
                function(data){
                    if(data.code == 1){
                        $('input[name=mo_banner]').val(va);
                        $(obj).parent().remove();
                    }else{
                        layer.msg('删除失败',function(){
                            // $('#create').empty();       //清空元素内部元素
                        });
                    }
                }
            );
        });
    }
</script>
</form>
{/block}